<template>
  <div class="appearance-container">
    <div class="container-item">
      <h3>{{ $t('preferences.theme') }}</h3>
      <div>
        <theme-switcher is-preferences></theme-switcher>
        <div class="toggle-container">
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.dark-sidebar') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.dark-topbar') }}</span>
            <el-switch v-model="value1" />
          </div>
        </div>
      </div>
    </div>
    <div class="container-item">
      <h3>{{ $t('preferences.built-in-theme') }}</h3>
      <div>
        <div class="built-in-container display-flex flex-wrap flex-align">
          <div
            class="built-in-item display-flex flex-align flex-justify outline is-active"
            v-for="i in 22"
            :key="i"
          >
            <div class="color"></div>
          </div>
          <div
            class="built-in-item display-flex flex-align flex-justify outline custom-color"
            @click="handleOpenColorPicker"
          >
            <core-custom-color-icon></core-custom-color-icon>
            <el-color-picker
              v-model="color1"
              color-format="rgb"
              style="display: none"
              ref="colorPickerRef"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="container-item">
      <h3>{{ $t('preferences.rounded-corners') }}</h3>
      <div>
        <div
          class="radius-container display-flex flex-align flex-justify-between"
        >
          <div
            class="radius-item display-flex flex-align flex-justify outline is-active"
          >
            0
          </div>
          <div class="radius-item display-flex flex-align flex-justify outline">
            0.25
          </div>
          <div class="radius-item display-flex flex-align flex-justify outline">
            0.5
          </div>
          <div class="radius-item display-flex flex-align flex-justify outline">
            0.75
          </div>
          <div class="radius-item display-flex flex-align flex-justify outline">
            1
          </div>
        </div>
      </div>
    </div>
    <div class="container-item">
      <h3>{{ $t('preferences.others') }}</h3>
      <div>
        <div class="toggle-container">
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.color-blind-mode') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.gray-mode') }}</span>
            <el-switch v-model="value1" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ThemeSwitcher from './components/theme-switcher/index.vue'
import { ref, useTemplateRef } from 'vue'
import type { ColorPickerInstance } from 'element-plus'

const value1 = ref(true)

const color1 = ref('rgb(77, 4, 6)')
const colorPickerRef = useTemplateRef<ColorPickerInstance>('colorPickerRef')
const handleOpenColorPicker = () => {
  colorPickerRef.value?.show()
}

defineOptions({
  name: 'CorePreferencesAppearance'
})
</script>

<style scoped lang="scss">
.appearance-container {
  .built-in-container {
    gap: 10px;

    .built-in-item {
      width: calc((100% - 20px) / 3);
      height: 44px;

      .color {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 4px;
      }

      &.custom-color {
        opacity: 0.6;
      }

      &:hover.custom-color {
        opacity: 1;
      }
    }
  }

  .radius-container {
    .radius-item {
      width: 60px;
      height: 28px;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>
